<!-- 轮播图 -->
<template>
  <div class="drag-swipe">
    <a-carousel autoplay v-if="showSwipe" >
      <div :style="{ paddingLeft: `${pagePadding}px`, paddingRight: `${pagePadding}px` }" class="swipe-item" v-for="(item, index) in list" :key="index">
        <img :src="item.imgSrc" :alt="item.title" :class="{ radius: chamfer === 2, shadow: imgStyle === 2 }">
        <p :class="{ radius: chamfer === 2 }" :style="{width: `${titleWidth}px`}" ref="title" class="title" v-show="item.title">{{ item.title }}</p>
      </div>
    </a-carousel>
    <img
      v-else
      class="active-img"
      src="https://img.yzcdn.cn/public_files/2019/03/05/2b60ed750a93a1bd6e17fc354c86fa78.png!large.webp"
    />
  </div>
</template>

<script>
  import { Carousel } from 'ant-design-vue'
  export default {
    name: 'DraggableSwipe',
    components: {
      'ACarousel': Carousel
    },
    props: ['list', 'pagePadding', 'chamfer', 'imgStyle', 'fillStyle'],
    computed: {
      showSwipe () {
        const { list } = this
        return list.filter(item => !!item.imgSrc).length > 0
      },
      titleWidth () {
        const { $refs, pagePadding } = this
        console.log(pagePadding, $refs)
        for (const key in $refs) {
          for (let i = 0; i < $refs[key].length; i++) {
            const domObj = $refs[key][i]
            if (domObj.className.indexOf('title') !== -1) {
              return domObj.parentElement.clientWidth - (pagePadding * 2)
            }
          }
        }
        return 0
      }
    }
  }
</script>

<style lang="less">
  .drag-swipe {
    width: 100%;
    .ant-carousel {
      .swipe-item {
        height: 199px;
        position: relative;
        box-sizing: border-box;
        img {
          &.shadow {
            box-shadow: 5px 5px 5px #888888;
          }
          &.radius {
            border-radius: 10px;
          }
        }
        .title {
          background-color: RGBA(0, 0, 0, .6);
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 30px;
          line-height: 30px;
          margin: 0;
          color: #ffffff;
          &.radius {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
          }
        }
      }
    }
    img {
      width: 100%;
    }
  }
</style>
